<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html, body {
           padding: 0;
           margin: 0;
        }
    </style>
</head>
<body>
<div id="menu">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="/operate">
            <template slot="title">我的工作台</template>
            <el-menu-item index="/updatePassword">修改密码</el-menu-item>
        </el-submenu>
        <el-submenu>
            <template slot="title">
                <i class="el-icon-setting"></i>
            </template>
            <el-menu-item index="/login">
                <div @click="logout">退出</div>
            </el-menu-item>
        </el-submenu>
        <div style="display: flex; align-items: center; height: 61px">欢迎您, {{ username }}</div>
    </el-menu>
</div>
<script>

    var app = new Vue({
        el: '#menu',
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                username: ''
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                location.href = keyPath.join('')
            },
            logout() {
                console.log('1')
                sessionStorage.clear()
            }
        },
        mounted() {
            this.username = sessionStorage.getItem('username')
        }
    });
</script>
</body>
</html>
